import React, { useState, useEffect } from 'react'
import { Modal, Form, Input, Radio, Upload, DatePicker, Space } from 'antd';
import { LoadingOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { setUpdateVisible } from "../../../store/slice/userSlice"
import { useSelector, useDispatch } from "react-redux"
import { url } from "../../../services/index"
import { putUser } from "../../../services/user"

export default function Update(props) {

    let dispatch = useDispatch()
    let updateVisible = useSelector(state => state.user.updateVisible)
    let updateuser = useSelector(state => state.user.updateuser)
    const [loading, setLoading] = useState(false);
    let [userNews, setuserNews] = useState({})
    let [form] = Form.useForm()
    const [date, setDate] = useState("")
    // const [getImg, setgetImg] = useState(updateuser.headImg)
    console.log("2222222", updateuser.headImg);

    // console.log("12333330", getImg);
    //将修改的信息填充
    form.setFieldsValue(updateuser)

    useEffect(() => {
        // if (updateuser=={}) {
        //     console.log("123");
        // }else{
        // let arry = [];
        // let  arryNum=[]
        // let getCoupons=""
        // let nums=""
        // updateuser.coupons.forEach(item => {
        //     arry.push(item.neme)
        //     arryNum.push(item.num)
        //     console.log(arry);
        //     getCoupons = arry.slice(',')
        //     nums = arryNum.splice(',')
        // });
        // form.setFieldsValue({ ...updateuser, couponsName: getCoupons, couponsNum: nums })
        // }
        
    }, [])

    //点击确认后预览图片
    const handleChange = (info) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            setLoading(false);
            setuserNews({ ...updateuser, headImg: info.file.response.filename })
            // setgetImg(info.file.response.filename)

        }
    }

    const handleOk = async () => {
        if (form.getFieldsValue().couponsNum < 0) {
            Modal.confirm({
                title: '提示',
                icon: <ExclamationCircleOutlined />,
                content: '优惠券数量不能为负',
                okText: '确认',
                cancelText: '取消',
            });
        } else {
            if (userNews.headImg == undefined) {
                console.log("123");
                let data = { ...form.getFieldsValue(), coupons: [{ neme: form.getFieldsValue().couponsName, num: form.getFieldsValue().couponsNum }], _id: updateuser._id, headImg: updateuser.headImg, birth: date }
                await putUser(data)
                props.show()
                dispatch(setUpdateVisible(false))
            } else {
                let data = { ...form.getFieldsValue(), coupons: [{ neme: form.getFieldsValue().couponsName, num: form.getFieldsValue().couponsNum }], _id: userNews._id, headImg: userNews.headImg, birth: date }
                await putUser(data)
                props.show()
                dispatch(setUpdateVisible(false))
            }

        }

    }

    const handleCancel = () => {
        dispatch(setUpdateVisible(false))
    }

    //日期
    const onChange = (date, dateString) => {
        setDate(dateString)
    };

    return <div>
        <Modal title="详细信息" open={updateVisible} onOk={handleOk} onCancel={handleCancel}>
            <Form
                name="basic"
                form={form}
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 10,
                }}
                initialValues={{
                    remember: true,
                }}
                autoComplete="off"
            >
                <Form.Item
                    label="昵称"
                    name="name"

                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="用户名"
                    name="username"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="pwd"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="性别"
                    name="gender"
                >
                    <Radio.Group >
                        <Radio value={"男"}>男</Radio>
                        <Radio value={"女"}>女</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item
                    label="生日信息"
                    name="birth"
                >
                    <Space direction="vertical">
                        <DatePicker onChange={onChange} />
                    </Space>
                </Form.Item>

                <Form.Item
                    label="联系电话"
                    name="phone"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="会员积分"
                    name="integral"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="优惠券名称"
                    name="couponsName"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="优惠券数量"
                    name="couponsNum"
                >
                    <Input type='number' style={{ width: "100px" }} />
                </Form.Item>
                <Form.Item
                    label="收货地址"
                    name="address"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="图片"
                    name="headImg"
                >
                    <Upload
                        name="file"
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action={url + "/users/upload"}
                        // beforeUpload={beforeUpload}
                        onChange={handleChange}
                    >
                        {updateuser.headImg ? (
                            <img
                                src={"http://localhost:3000/images/" + updateuser.headImg}
                                alt="file"
                                style={{
                                    width: '100%',
                                }}
                            />
                        ) : (
                            <div>
                                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                                <div style={{ marginTop: 8 }}>Upload</div>
                            </div>
                        )}
                    </Upload>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                </Form.Item>
            </Form>
        </Modal>
    </div>

}
